import React, { useState } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { Calendar, CalendarList, Agenda, CalendarProvider, AgendaList } from 'react-native-calendars';
import { Tester, TestCase, TestSuite } from '@rnoh/testerino';

const leftArrowIcon = require('./img/previous.png');

export function CalendarExample7() {
    const [daySelected, setDaySelected] = useState('');
    const [dayLongSelected, setDayLongSelected] = useState('');
    const [monthSelected, setMonthSelected] = useState('');
    const [day, setDay] = useState('');
    const [day1, setDay1] = useState('');


    return <ScrollView style={styles.container}>
    

        <Tester>
            <TestSuite name='showWeekNumbers'>
                <TestCase itShould="test Calendar showWeekNumbers property with value true">
                    <Calendar
                        showWeekNumbers={true}
                    />
                </TestCase>
                <TestCase itShould="test Calendar showWeekNumbers property with value false">
                    <Calendar
                        showWeekNumbers={false}
                    />
                </TestCase>
            </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='enableSwipeMonths'>
                <TestCase itShould="test Calendar enableSwipeMonths property with value true">
                    <Calendar
                        enableSwipeMonths={true}
                    />
                </TestCase>
                <TestCase itShould="test Calendar enableSwipeMonths property with value false">
                    <Calendar
                        enableSwipeMonths={false}
                    />
                </TestCase>
            </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='allowSelectionOutOfRange'>
                    <TestCase itShould="test Calendar allowSelectionOutOfRange property with value true">
                        <Text>{day}</Text>
                        <Calendar
                            minDate={'2024-08-10'}
                            allowSelectionOutOfRange={true}
                            maxDate={'2024-08-25'}
                            onDayPress={days => {
                                setDay(JSON.stringify(days));
                                console.log('selected day', days);
                            }}
                        />
                    </TestCase>
                    <TestCase itShould="test Calendar allowSelectionOutOfRange property with value false">
                        <Text>{day1}</Text>
                        <Calendar
                            minDate={'2024-08-10'}
                            allowSelectionOutOfRange={false}
                            maxDate={'2024-08-25'}
                            onDayPress={days => {
                                setDay1(JSON.stringify(days));
                                console.log('selected day', days);
                            }}
                        />
                    </TestCase>
                </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='disabledByDefault'>
                <TestCase itShould="test Calendar disabledByDefault property with value true">
                    <Calendar
                        disabledByDefault={true}
                    />
                </TestCase>
                <TestCase itShould="test Calendar disabledByDefault property with value false">
                    <Calendar
                        disabledByDefault={false}
                    />
                </TestCase>
            </TestSuite>
        </Tester>

        <Tester>
            <TestSuite name='minDate and maxDate'>
                <TestCase itShould="test Calendar minDate and maxDate properties with value '2012-05-10' and '2012-05-25'">
                    <Calendar
                        initialDate={'2012-05-01'}
                        minDate={'2012-05-10'}
                        maxDate={'2012-05-25'}
                    />
                </TestCase>
            </TestSuite>
        </Tester>

 
        <Tester>
            <TestSuite name='testID'>
                <TestCase itShould="Calendar组件设置testID为'calendar-main'">
                    <Calendar
                        testID="calendar-main"
                        current={'2024-08-01'}
                        onDayPress={(day) => {
                            console.log('testID: calendar-main, 选择的日期:', day.dateString);
                        }}
                    />
                </TestCase>
                
                <TestCase itShould="多个Calendar组件设置不同的testID">
                    <View style={{ flexDirection: 'column', gap: 10 }}>
                        <Calendar
                            testID="calendar-first"
                            current={'2024-08-01'}
                            style={{ marginBottom: 10 }}
                            onDayPress={(day) => {
                                console.log('testID: calendar-first, 选择的日期:', day.dateString);
                            }}
                        />
                        <Calendar
                            testID="calendar-second"
                            current={'2024-09-01'}
                            onDayPress={(day) => {
                                console.log('testID: calendar-second, 选择的日期:', day.dateString);
                            }}
                        />
                    </View>
                </TestCase>
                
                <TestCase itShould="Agenda组件设置testID为'agenda-view'">
                    <View style={{ height: 400 }}>
                        <Agenda
                            testID="agenda-view"
                            items={{
                                '2024-08-15': [{ name: '会议', height: 80 }],
                                '2024-08-16': [{ name: '生日派对', height: 80 }],
                            }}
                            selected={'2024-08-15'}
                            renderItem={(item) => (
                                <View style={{ padding: 10, backgroundColor: 'white', margin: 5 }}>
                                    <Text>{item.name}</Text>
                                </View>
                            )}
                            onDayPress={(day) => {
                                console.log('testID: agenda-view, 选择的日期:', day.dateString);
                            }}
                        />
                    </View>
                </TestCase>
                
                <TestCase itShould="测试组件嵌套中的testID">
                    <CalendarProvider 
                        date={'2024-08-01'}
                        testID="calendar-provider"
                    >
                        <View>
                            <Text testID="nested-text">嵌套组件测试</Text>
                            <Calendar
                                testID="nested-calendar"
                                onDayPress={(day) => {
                                    console.log('testID: nested-calendar, 选择的日期:', day.dateString);
                                }}
                            />
                        </View>
                    </CalendarProvider>
                </TestCase>
            </TestSuite>
        </Tester>

     
        <Tester>
            <TestSuite name='disabledByWeekDays'>
                <TestCase itShould="禁用周六和周日 (0 和 6)">
                    <Calendar
                        disabledByWeekDays={[0, 6]} // 0=周日, 6=周六
                        markedDates={{
                            '2024-08-10': {selected: true, selectedColor: 'blue'},
                            '2024-08-11': {selected: true, selectedColor: 'blue'},
                            '2024-08-17': {selected: true, selectedColor: 'blue'},
                            '2024-08-18': {selected: true, selectedColor: 'blue'},
                        }}
                        onDayPress={(day) => {
                            console.log('选择的日期:', day.dateString, '是否禁用:', day.dateString === '2024-08-10' || day.dateString === '2024-08-11' || day.dateString === '2024-08-17' || day.dateString === '2024-08-18');
                        }}
                    />
                </TestCase>
                
                <TestCase itShould="禁用工作日 (周一到周五)">
                    <Calendar
                        disabledByWeekDays={[1, 2, 3, 4, 5]} // 1=周一, 2=周二, 3=周三, 4=周四, 5=周五
                        markedDates={{
                            '2024-08-12': {selected: true, selectedColor: 'red'},
                            '2024-08-13': {selected: true, selectedColor: 'red'},
                            '2024-08-14': {selected: true, selectedColor: 'red'},
                            '2024-08-15': {selected: true, selectedColor: 'red'},
                            '2024-08-16': {selected: true, selectedColor: 'red'},
                        }}
                        onDayPress={(day) => {
                            console.log('选择的日期:', day.dateString, '是否禁用:', 
                                day.dateString === '2024-08-12' || day.dateString === '2024-08-13' || 
                                day.dateString === '2024-08-14' || day.dateString === '2024-08-15' || 
                                day.dateString === '2024-08-16');
                        }}
                    />
                </TestCase>
                
                <TestCase itShould="只禁用周三 (3)">
                    <Calendar
                        disabledByWeekDays={[3]} // 只禁用周三
                        markedDates={{
                            '2024-08-14': {selected: true, selectedColor: 'orange', disabled: true},
                            '2024-08-21': {selected: true, selectedColor: 'orange', disabled: true},
                            '2024-08-28': {selected: true, selectedColor: 'orange', disabled: true},
                        }}
                        onDayPress={(day) => {
                            console.log('选择的日期:', day.dateString, '是否周三:', 
                                new Date(day.dateString).getDay() === 3);
                        }}
                    />
                </TestCase>
                
                <TestCase itShould="不禁用任何日期 (空数组)">
                    <Calendar
                        disabledByWeekDays={[]} // 空数组，不禁用任何日期
                        markedDates={{
                            '2024-08-10': {selected: true, selectedColor: 'green'},
                            '2024-08-11': {selected: true, selectedColor: 'green'},
                            '2024-08-12': {selected: true, selectedColor: 'green'},
                        }}
                        onDayPress={(day) => {
                            console.log('选择的日期:', day.dateString, '所有日期都可选择');
                        }}
                    />
                </TestCase>
            </TestSuite>
        </Tester>
    
    </ScrollView >
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
    },
    item: {
        width: '100%',
        marginBottom: 20,
        borderColor: 'blue',
        borderWidth: 1,
    },
    itemText: {
        color: 'blue',
        fontSize: 12,
    }
})

